<!--
 * @Description: 首页组件
 -->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="item in carousel" :key="item.carouselId">
          <img style="height:460px; width:1225px" :src="$target + item.imgPath"  />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->
    <div class="main-box">
      <div class="main">
        <!-- 手机商品展示区域 -->
        <div class="phone">
          <div class="box-hd">
            <div class="title">手机</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <router-link to>
                <img :src="$target +'../imgs/phone/phone.png'" />
              </router-link>
            </div>
            <div class="list">
              <MyList :list="phoneList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 手机商品展示区域END -->

        <!-- 书籍教材商品展示区域 -->
        <div class="books" id="promo-menu">
          <div class="box-hd">
            <div class="title">书籍教材</div>
            <div class="more" id="more">
              <MyMenu :val="2" @fromChild="getChildMsg">
              </MyMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target +'../imgs/books/books-promo1.jpg'" />
                </li>
                <li>
                  <img :src="$target +'../imgs/books/books-promo2.png'" />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="booksList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 书籍教材商品展示区域END -->

        <!-- 衣物鞋子商品展示区域 -->
        <div class="clotherShoes" id="promo-menu">
          <div class="box-hd">
            <div class="title">衣物鞋子</div>
            <div class="more" id="more">
              <MyMenu :val="3" @fromChild="getChildMsg2">
              </MyMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target +'../imgs/clothshoes/clothes-promo1.png'" alt />
                </li>
                <li>
                  <img :src="$target +'../imgs/clothshoes/clothes-promo1.png'" alt />
                </li>
              </ul>
            </div>
            <div class="list">
              <MyList :list="clotherShoesList" :isMore="true"></MyList>
            </div>
          </div>
        </div>
        <!-- 衣物鞋子商品展示区域END -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      carousel: "", // 轮播图数据
      phoneList: "", // 手机商品列表
      booksList: "", // 书籍教材商品列表
      booksHotList: "", //热门书籍教材商品列表
      clotherShoesList: "", //衣物鞋子商品列表
      chargerList: "", //充电器商品列表
    };
  },
  watch: {
    // 书籍教材当前选中的商品分类，响应不同的商品数据
    booksActive: function(val) {
      // 页面初始化的时候把booksHotList(热门书籍教材商品列表)直接赋值给booksList(书籍教材商品列表)
      // 所以在切换商品列表时判断booksHotList是否为空,为空则是第一次切换,把booksList赋值给booksHotList
      if (this.booksHotList == "") {
        this.booksHotList = this.booksList;
      }
      if (val == 1) {
        // 1为热门商品
        this.booksList = this.booksHotList;
        return;
      }

    },
    clotherShoesActive: function(val) {
      // 页面初始化的时候把clotherShoesHotList(热门衣物鞋子商品列表)直接赋值给clotherShoesList(衣物鞋子商品列表)
      // 所以在切换商品列表时判断clotherShoesHotList是否为空,为空则是第一次切换,把clotherShoesList赋值给clotherShoesHotList
      if (this.clotherShoesHotList == "") {
        this.clotherShoesHotList = this.clotherShoesList;
      }
      if (val == 1) {
        // 1为热门商品
        this.clotherShoesList = this.clotherShoesHotList;
        return;
      }

    }
  },
  created() {
    // 获取轮播图数据
    this.$axios({
        url:"/api/carousel/selectCarousel"
      })
      .then(res => {
        this.carousel = res.data;
      })
      .catch(err => {
        return Promise.reject(err);
      });
    // 获取各类商品数据
    this.getPromo(1, "phoneList");
    this.getPromo(9, "booksList");
    this.getPromo(11, "clotherShoesList");

  },
  methods: {
    // 获取书籍教材模块子组件传过来的数据
    getChildMsg(val) {
      this.booksActive = val;
    },
    // 获取衣物鞋子模块子组件传过来的数据
    getChildMsg2(val) {
      this.clotherShoesActive = val;
    },
    // 获取各类商品数据方法封装
    getPromo(categoryId, val) {

      this.$axios( {
          url:"/api/goods/getPromoGoods/"+categoryId
        })
        .then(res => {
          this[val] = res.data;
        })
        .catch(err => {
          return Promise.reject(err);
        });
    }
  }
};
</script>
<style scoped>
@import "../assets/css/index.css";
</style>